<template>
    <div class="echarts_gauge" ref="echartsGraph"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
    data: () => ({
        chart: null
    }),
    mounted() {
        this.renderEcharts();
        window.addEventListener('resize', this.resizeChart)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.resizeChart)
    },
    methods: {
        renderEcharts() {
            this.chart = echarts.init(this.$refs["echartsGraph"], null, { renderer: 'svg' });
            const basic = {
                min: -10,
                max: 30,
                startAngle: 225,
                endAngle: -45
            }
            const basicAngle = Math.abs(basic.startAngle - basic.endAngle)
            const range = {
                min: 10,
                max: 20
            }
            const rangeMinLength = Math.abs(basic.min - range.min)
            const rangeMaxLength = Math.abs(basic.min - range.max)
            const rangeStartAngle = basic.startAngle - ((rangeMinLength/ 40) * basicAngle)
            const rangeEndAngle = basic.startAngle - ((rangeMaxLength/ 40) * basicAngle)
            const options = {
                series: [
                    {
                        type: 'gauge',
                        title: {
                            show: false
                        },
                        detail: {
                            show: false
                        },
                        pointer: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            roundCap: true,
                            lineStyle: {
                                width: 30,
                                color: [
                                    [1, 'rgba(38, 95, 227, 0.2)']
                                ]
                            }
                        },
                        min: basic.min,
                        max: basic.max,
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: true,
                            distance: 20,
                            formatter: function(value) {
                                if(value === basic.max || value === basic.min) return value
                                return ''
                            }
                        },
                        startAngle: basic.startAngle,
                        endAngle: basic.endAngle
                    },
                    {
                        type: 'gauge',
                        axisLine: {
                            show: true,
                            roundCap: true,
                            lineStyle: {
                                width: 30,
                                color: [
                                    [1, 'rgba(38, 95, 227, 1)']
                                ]
                            }
                        },
                        splitNumber: 5,
                        min: range.min,
                        max: range.max,
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: true,
                            distance: 20,
                            formatter: function(value) {
                                if((value === range.max && range.max !== basic.max) || (value === range.min && range.min !== basic.min)) return value
                                return ''
                            }
                        },
                        startAngle: rangeStartAngle,
                        endAngle: rangeEndAngle
                    }
                ]
            }
            this.chart.setOption(options);
        },
        resizeChart() {
            this.chart?.resize()
        }
    }
}
</script>
<style lang="less" scoped>
.echarts_gauge {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>